Day 21：我想控制這些動畫效果【Tailwind – Transition 篇】 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 21

自我挑戰組

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列第 21 篇

Day 21：我想控制這些動畫效果【Tailwind – Transition 篇】

14th鐵人賽

linlaose

團隊死線衝鋒 Deadline Squad

2022-10-06 17:22:53

565 瀏覽

分享至

在 css 裡除了明天會分享的 animation 以外，transition 也可以輕鬆套用、今天也會針對客製化屬性多做著墨哦

在套用 hover 時，如果沒加上 transition 的樣式整個效果就會很死板，所以通常 hover 的效果我們都會加上 transition 做簡單的動畫表現。


在 tailwind 中雖然提供的 transition property 不多，但通常也夠用了，畢竟 tailwind 還是有提供 transition: all; 的樣式，但如果真的遇到需要客製化也是在 config 檔案下的 extend 區塊新增 transitionProperty：

transitionProperty: {
    'height': 'height',
}

只是要記得物件屬性與值都要加上成對的引號。另外，transition 本身只針對具有數值化的樣式，也就是說 display: block; <=> display: none; 這種 display 樣式的互相切換，因為不像高度是數值化的，所以即使加入客製化也沒辦法套用動畫樣式，這點需要特別注意！
而 transition 預設的 duration 和 time function 還有 delay 也可另外新增客製化並加入 class 中。